<template>
  <div class="masage">
    <h1>歌单广场</h1>
    <div class="all_sort_info">
      <div class="all_list" v-for="(index, id) in sort_list" :key="index.id">
        <div class="tittle">
          <img :src="index.icon" alt="" />
          <p>{{ index.name }}</p>
        </div>
        <div class="sort_list">
          <a href="javascript:;" 
          v-for="(ind, id) in index.children" :key="ind.id"
          @click="go_special(ind.id,ind.theme)">{{
            ind.name.replace("专区", "")
          }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      await this.$store.dispatch("special_sort",0);
    },
    async go_special(index,index_1){
      setTimeout(()=>{
        this.$router.push({name:'special_list',query:{id:index,theme:index_1}})
      },100)   
    }
  },
  computed: {
    ...mapState({
      sort_list: (state) => state.special.special_sort,
    }),
    
  },
};
</script>

<style lang="less">
.masage {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  h1 {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .all_sort_info {
    .all_list {
      display: flex;
      min-height: 84px;
      margin-bottom: 20px;
      .tittle {
        flex: 2;
        display: flex;
        flex-direction: column;
        background-color: #cdcacaeb;
        align-items: center;
        justify-content: center;
        img {
          width: 60px;
          height: 60px;
        }
        p {
          width: 80px;
          text-align: center;
        }
      }
      .sort_list {
        flex: 8;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        a {
          width: 158px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          border: 1px solid #e3e3e3;
          background-color: #f9f9f9;
          color: #000;
        }
      }
    }
  }
}
</style>